<template>
		<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 8 }" class="form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="入库编号" name="warehousebillcode">
            <a-input v-model:value="formData.warehousebillcode" placeholder="请输入仓库编号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="入库仓库" name="warehouseid">
            <a-select  v-model:value="formData.warehouseid"  placeholder="请选择仓库" :options="categoryOptions"  allow-clear  style="width: 100%" ></a-select>
          </a-form-item>
        </a-col>
        
        <a-col :span="8">
          <a-form-item label="入库时间" name="warehousedate">
            <a-date-picker 
              v-model:value="formData.warehousedate" 
              style="width: 100%"
              placeholder="请选择入库时间"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="入库名称" name="warehousebillname">
            <a-input v-model:value="formData.warehousebillname" placeholder="请输入入库名称" allow-clear />
          </a-form-item>
        </a-col>

        <a-col :span="8">
          <a-form-item label="入库类型" name="warehousebilltype">
            <a-select 
              v-model:value="formData.warehousebilltype"
              placeholder="请选择入库类型"
              :options="[{value:1,label:'采购入库'},{value:2,label:'退货入库'}]"
              style="width: 100%"
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="备注" name="remark">
            <a-input v-model:value="formData.remark" placeholder="请输入备注信息" allow-clear />
          </a-form-item>
        </a-col>
      </a-row>
		</a-form>
    <a-divider>入库明细信息</a-divider>

    <a-button type="primary" @click="handleAdd"><template #icon><PlusOutlined /></template> 添加</a-button>

        <a-table
			ref="table"
      style="margin-top: 10px;"
			:columns="columns"
			bordered
			:row-key="(record) => record.id"
      :data-source="dataSource"
		>
			<template #bodyCell="{ column, record,index }">
        <template v-if="column.dataIndex === 'materialname'">
          <a-input v-model:value="record.materialname" style="width:100px" disabled ></a-input><a-button @click="form.openmodal(index)" style="margin-left: 10px;" type="primary"><search-outlined /></a-button>
        </template>
        <template v-if="column.dataIndex === 'materialcode'">
          <a-input v-model:value="record.materialcode" disabled ></a-input>
        </template>
        <template v-if="column.dataIndex === 'specification'">
          <a-input v-model:value="record.specification" disabled ></a-input>
        </template>
        <template v-if="column.dataIndex === 'instoreqty'">
          <a-input v-model:value="record.instoreqty" @change="calculateTotal(record)"></a-input>
        </template>
        <template v-if="column.dataIndex === 'price'">
          <a-input v-model:value="record.price" @change="calculateTotal(record)"></a-input>
        </template>
        <template v-if="column.dataIndex === 'toolprices'">
          <a-input v-model:value="record.toolprices" disabled></a-input>
        </template>

				<template v-if="column?.dataIndex === 'action'">
					<a-space>
						<a-popconfirm title="确定要删除此信息吗？" @confirm="deleteModule(record)">
							<a-button type="link" danger size="small">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</a-table>
    <a-button type="primary" @click="onSubmit"><template #icon><PlusOutlined /></template>确认入库</a-button>&nbsp;

<!-- 对话框显示商品信息 -->
  <Form ref="form"  @confirm="handleMaterialConfirm" @successful="table.refresh(true)"  />
</template>
<script setup name="procureInfo">
import { message } from 'ant-design-vue';
import { required } from '@/utils/formRules'
import tool from '@/utils/tool'
import Form from './detail.vue'
import warehouseapi  from '@/api/wms/warehouse/warehouseapi'
import router from '@/router'


//#region  表格新增行



// 入库明细表单数据
	const table = ref()
	let form = ref()
  //明细数据
  const dataSource = ref([])
	const columns = [
		{title: '产品名称',dataIndex: 'materialname',width: '250px'},
		{title: '产品编号',dataIndex: 'materialcode',},
		{title: '规格型号',dataIndex: 'specification',},
		{title: '数量',dataIndex: 'instoreqty',},
    {title: '价格',dataIndex: 'price',},
    {title: '总价',dataIndex: 'toolprices',},
		{title: '操作',dataIndex: 'action',align: 'center',width: '200px'}
	]

  //点击按钮新增行
  const handleAdd=()=>{
    dataSource.value.push({
      materialname:'',
      materialcode:'',
      specification:'',
      instoreqty:'',
      price:'',
      toolprices:'',
      product_Id:'',
    })
  }

//自动计算总价
  const calculateTotal = (record) => {
  const qty = parseFloat(record.instoreqty) || 0;
  const price = parseFloat(record.price) || 0;
  record.toolprices = (qty * price).toFixed(2); // 保留2位小数

};

//#endregion

	// 默认是关闭状态
	const emit = defineEmits({ successful: null })
	const formRef = ref()

	// 入库表单数据
	const formData = ref({})
  
	// 默认要校验的
	const formRules = {
		warehousebillcode: [required('请输入仓库编号')],
		warehouseid: [required('请选择入库仓库')],
    warehousedate: [required('请输入入库时间')],
    warehousebillname: [required('请输入入库名称')],
    warehousebilltype: [required('请选择入库类型')],
	}

	// 验证并提交数据
	const onSubmit = () => {
  // 转换明细数据
  formData.value.ware_warehousebilllist = dataSource.value.map(item => ({
    product_Id: item.product_Id,
    price: item.price,          // 修正字段名（原代码用 product_Id 可能是错误）
    toolprice: item.toolprice,
    instoreqty: item.instoreqty,
    inventoryqty: item.inventoryqty
  }));
   
    console.log(formData.value.ware_warehousebilllist)
 
			warehouseapi.Add1(formData.value).then(() => {
        message.success('添加成功');
        //跳转到入库列表
        router.replace({ path: '/warehouse/procureInto' })
			})
	}
   //分类字典获取仓库
   const categoryOptions = tool.dictList('warehouseid')


const handleMaterialConfirm = (selectedMaterial,rowindex) => {
  // 在这里处理接收到的数据（如更新表单、存储到状态等）
  dataSource.value[rowindex].materialname=selectedMaterial.materialname
  dataSource.value[rowindex].materialcode=selectedMaterial.materialcode
  dataSource.value[rowindex].specification=selectedMaterial.specification
  dataSource.value[rowindex].product_Id=selectedMaterial.id
  console.log(selectedMaterial.id)
};


</script>
<style scoped>
.form {
  padding: 16px 24px;
}

.ant-form-item {
  margin-bottom: 16px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.action-buttons {
  display: flex;
  align-items: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ant-col {
    width: 100% !important;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 12px;
  }
  
  .action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>